<!--
 * @Author: tenet 18742176629@163.com
 * @Date: 2024/7/3 下午1:57
 * @LastEditors: tenet 18742176629@163.com
 * @LastEditTime: 2024/7/3 下午1:57
 * @FilePath: G:/chain-link-api-front-admin/src/views/interfaceDoc\index2.vue
 * @Description: 接口文档
-->
<template>


<!--      <span>{{t('global.Files')}}</span>-->
<!--      <el-button type="primary" @click="handleImport">{{ t('button.ClickUpload')}}</el-button>-->
<!--  <ManageUpload-->
<!--      :fileName="fileName"-->
<!--      :title="title"-->
<!--      :open="open"-->
<!--      ref="uploadRef"-->
<!--      @CloseUpload="CloseUpload"-->
<!--      @submitFileForm="submitFileForm"-->
<!--  ></ManageUpload>-->
  <div class="btnBox">
    <el-button type="primary" @click="handleUpload">{{ t('button.ClickUpload')}}</el-button>

  </div>
  <el-skeleton v-if="loading" />
  <div v-else>

    <div style="border: 1px solid #ccc; margin-top: 10px">
      <Toolbar
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
          style="border-bottom: 1px solid #ccc"
      />
      <Editor
          :defaultConfig="editorConfig"
          :mode="mode"
          v-model="valueHtml"
          style="height: 400px; overflow-y: hidden"
          @onCreated="handleCreated"
          @onChange="handleChange"
          @onDestroyed="handleDestroyed"
          @onFocus="handleFocus"
          @onBlur="handleBlur"
          @customAlert="customAlert"
          @customPaste="customPaste"
      />
    </div>
    <div style="margin-top: 10px">
      <textarea
          v-model="valueHtml"
          readonly
          style="width: 100%; height: 200px; outline: none"
      ></textarea>
    </div>
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onUnmounted, ref, shallowRef, onMounted, onBeforeUnmount} from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {getInfo, createWebConfig} from "@/require/api.js"
import {ElLoading, ElMessage} from "element-plus";
import {useI18n} from "vue-i18n";
import {Upload} from "@element-plus/icons-vue";
const {t} = useI18n();

onMounted(()=>{
  getList()

})

async function handleUpload() {
  try {
    const { code, data, msg } = await createWebConfig({
      content: valueHtml.value,
    })
    if( code === 200){
      ElMessage.success(t('message.UploadSuccess'))
    }else{
      ElMessage.error(msg)
    }
  }catch (e) {
      console.log(e)
  }
}

const fileList = ref([]);
const fileName = ref("equipment_add.xls");
/**
  * @description: 导入确认
  * @return {*}
  */

const submitFileForm = async (fileList) => {
  console.log('1111111', fileList.value[0].raw)
  const loading = ElLoading.service({
    lock: true,
    text: "导入中，请稍后！",
    background: "rgba(0, 0, 0, 0.7)"
  });
  let formData = new FormData();
  formData.append("file", fileList.value[0].raw);
  formData.append("name", 'xxx');
  if (fileList.value.length == 0) {
    ElMessage.error("导入数据不能为空");
    loading.close();
    return;
  }
  try {
    await createWebConfig(formData)
    ElMessage.success("上传成功");
    CloseUpload(false);
    loading.close();
  } catch (error) {
    loading.close();
  }
};

const title = ref("上传");
const open = ref(false);
/**
  * @description: 导入按钮
  * @return {*}
  */
const handleImport = () => {
  title.value = "文件上传";
  console.log('我被点击了')
  uploadRef.value.openUpload()
};
/**
  * @description: 导入弹窗关闭
  * @return {*}
  */
const CloseUpload = (value) => {
  open.value = value;
  getList();
};
// 获取接口文档
async function getList(){
  const editor = editorRef.value;
  try {
    loading.value = true
    const {code, data, msg} = await getInfo()
    if(code === 200){
      // valueHtml.value =editor.getText(data.content)
      valueHtml.value = data.content
    }
  }catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}
/*
* 带 admin 的是后端
*  不带的是前端
* */

const loading = ref(false)
const uploadRef = ref()
const devUrl = "http://192.168.0.116:9999/api/createWebConfig"
const proUrl = "https://adminapi.wwwrfs.com/api/createWebConfig"

const beforeAvatarUpload = (file) => {
  // 验证文件类型是否为.md
  const isMD = file.type === 'text/markdown' || file.name.endsWith('.md');
  if (!isMD) {
    ElMessage.error(t('message.isMD'));
    return false; // 阻止上传
  }
  // 可以在这里添加更多验证逻辑，如文件大小限制等
  return true;
}

const submitUpload = () => {
  uploadRef.value.submit()
}


// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref('');

const toolbarConfig = {};
const editorConfig = { placeholder: '请输入内容...' };

// 组件销毁时，也及时销毁编辑器，重要！
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;

  editor.destroy();
});

// 编辑器回调函数
const handleCreated = (editor) => {
  console.log('created', editor);
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleChange = (editor) => {
  console.log('change:', editor.getHtml());
};
const handleDestroyed = (editor) => {
  console.log('destroyed', editor);
};
const handleFocus = (editor) => {
  console.log('focus', editor);
};
const handleBlur = (editor) => {
  console.log('blur', editor);
};
const customAlert = (info, type) => {
  alert(`【自定义提示】${type} - ${info}`);
};
const customPaste = (editor, event, callback) => {
  console.log('ClipboardEvent 粘贴事件对象', event);

  // 自定义插入内容
  editor.insertText('xxx');

  // 返回值（注意，vue 事件的返回值，不能用 return）
  callback(false); // 返回 false ，阻止默认粘贴行为
  // callback(true) // 返回 true ，继续默认的粘贴行为
};

const insertText = () => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.insertText('hello world');
};

</script>

<style scoped lang="less">
.btnBox{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
</style>